<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>健康服务包管理</title>
  <link rel="stylesheet" href="./../bootstrap4/dist/css/bootstrap.css">
  <link rel="stylesheet" href="./../font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="./../css/index.css">
  <link rel="stylesheet" href="./../css/header.css">
  <link rel="stylesheet" href="./../css/menu.css">

</head>

<body>
  <div class="container-fluid box-height">
    <div class="row header-h  border-light d-flex align-content-center shadow-lg bg-header">
      <div class="col-sm-2 col-lg-2 text-light">
        <i class="fa fa-user text-success size-24"></i>
        <span id="usernickname" class="mx-2">wqw</span>，欢迎您。
      </div>
      <div class="col-sm-7 col-lg-7 text-center">
        <span class="text-success font-weight-bold size-20">成都市龙泉驿区北泉路社区社区医院家庭医生签约服务平台</span>
      </div>
      <div class="col-sm-3 col-lg-3 text-right">
        <a type="button" class="btn btn-link text-light" href="./user_info.html">
          <i class="fa fa-user-circle-o text-primary"></i>
          <span>账户设置</span>
        </a>
        <button type="button" class="btn btn-link text-light" id="exitSystem">
          <i class="fa fa-sign-out text-warning"></i>
          <span>退出系统</span>
        </button>
      </div>
    </div>
    <div class="row menu-height">
      <div class="col-lg-2 px-0">
        <ul class="menu box-height bg-menu">
          <li>
            <div class="px-4 bg-menu">
              <a href="./main.html" class="btn-link">
                <i class="fa fa-tachometer pr-2"></i>
                <span>工作台</span></a>
            </div>
          </li>
          <li>
            <div class="px-4">
              <span>
                <i class="fa fa-cogs pr-2"></i>
                <span>权限管理</span>
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div class="text-center">
              <a href="./accesslist.html" class="btn-link">权限管理</a>
            </div>
            <div class="text-center">
              <a href="./rolelist.html" class="btn-link">角色管理</a>
            </div>
            <div class="text-center">
              <a href="./userlist.html" class="btn-link">用户管理</a>
            </div>
          </li>
          <li>
            <div class="px-4">
              <span>
                <i class="fa fa-object-group pr-2"></i>
                <span>医生团队管理</span>
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div class="text-center">
              <a href="./doctor_team_management.html" class="btn-link">家庭医生团队管理</a>
            </div>
            <div class="text-center">
              <a href="./doctors_management.html" class="btn-link">家庭医生管理</a>
            </div>
            <div class="text-center">
              <a href="./doctors_job.html" class="btn-link">医生职称管理</a>
            </div>
          </li>

          <li>
            <div class="px-4">
              <span>
                <i class="fa fa-table pr-2"></i>
                <span>签约管理</span>
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div class="text-center">
              <a href="./serivce_pack.html" class="btn-link">健康服务包管理</a>
            </div>
            <div class="text-center">
              <a href="./person_types.html" class="btn-link">居民类别管理</a>
            </div>
            <div class="text-center">
              <a href="./contract_management.html" class="btn-link">签约居民列表</a>
            </div>
          </li>
          <li>
            <div class="px-4">
              <span>
                <i class="fa fa-database pr-2"></i>
                <span>统计分析</span>
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div class="text-center">
              <a href="./statistic_table.html" class="btn-link">统计表</a>
            </div>
            <div class="text-center">
              <a href="./statistic_charts.html" class="btn-link">统计图</a>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-lg-10 bg-white">
        <!-- 面包屑导航  -->
        <div class="row">
          <div class="col  px-0">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="" class="text-success">签约管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">健康服务包管理</li>
              </ol>
            </nav>
          </div>
        </div>
        <!-- title -->
        <div class="row">
          <div class="col">
            <h5 class="border-bottom mb-3 pb-2 pl-2 title-border">服务包列表</h5>
          </div>
        </div>
        <!-- 搜索栏 -->
        <div class="row bg-light py-3 justify-content-between">
          <div class="col-10">
            <form class="form-inline text-black-50">
              <button type="button" class="btn btn-success mr-2" data-target="#modalAddServerPack" data-toggle="modal">
                <i class="fa fa-plus-circle text-warning mr-2"></i>
                <span>添加服务包种类</span>
              </button>
              <!-- 数据库直接初始化三个级别的类型，自动生成详细列表数据，价格单独修改 -->
              <!-- <button type="button" class="btn btn-info mr-2">
                <i class="fa fa-plus-circle text-warning mr-2"></i>
                <span>添加服务包类型</span>
              </button> -->
              <label for="serverPackType" class="mr-2">服务包种类:</label>
              <select name="contractState" id="serverPackType" class="custom-select mr-2">
                <option value="" disabled selected>---请选择服务种类---</option>
                <option value="0">公共卫生基础服务</option>
                <option value="1">0~6岁儿童保健</option>
                <option value="2">高血压</option>
                <option value="3">糖尿病</option>
                <option value="4">孕产妇</option>
                <option value="5">肺结核</option>
                <option value="6">严重精神障碍</option>
              </select>
              <label for="serverPackType" class="mr-2">服务包级别:</label>
              <select name="contractState" id="serverPackType" class="custom-select mr-2">
                <option value="" disabled selected>---请选择服务包类型---</option>
                <option value="1">初级包</option>
                <option value="2">中级包</option>
                <option value="3">高级包</option>
              </select>
              <button type="button" class="btn btn-primary mr-2"><i
                  class="fa fa-search text-warning mr-2"></i><span>查询</span></button>
            </form>
          </div>
          <div class="col-2 text-right">
            <button type="button" class="btn btn-warning"><i class="fa fa-refresh text-light"></i></button>
          </div>
        </div>
        <!-- 表格展示 -->
        <div class="row mt-3 rounded-lg bg-light pt-3 pb-3">
          <!-- 左侧 -->
          <div class="col-6">
            <!-- 左上表 -->
            <div class="row mx-1">
              <div class="col  rounded bg-white">
                <table class="table table-bordered table-hover table-sm">
                  <caption class="table-title bg-info text-white">服务包类型列表</caption>
                  <thead>
                    <th width="60">序号</th>
                    <th>服务包类型</th>
                    <th>说明</th>
                    <th width="70">操作</th>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>初级包</td>
                      <td>提供一个服务包种类的基本服务功能</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>中级包</td>
                      <td>提供一个服务包种类的增强服务功能</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>高级包</td>
                      <td>提供一个服务包种类的全面服务功能</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!-- 左下表 -->
            <div class="row  mx-1 mt-3">
              <div class="col rounded bg-white">
                <table class="table  table-hover table-bordered table-sm  ">
                  <caption class="table-title  bg-info text-white">服务包种类列表</caption>
                  <thead>
                    <th width="60">序号</th>
                    <th width="150">服务包种类</th>
                    <th>说明</th>
                    <th width="70">操作</th>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>公共卫生基础服务</td>
                      <td>全民公共卫生免费服务包</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>0~6岁儿童保健</td>
                      <td>包括儿童保健免费服务，儿童预苗服务等。</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>高血压</td>
                      <td>包括免费血压检查，降血压跟踪服务等。</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>糖尿病</td>
                      <td>定期上门服务，血糖检查等服务。</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>孕产妇</td>
                      <td>孕前咨询，保健、育儿服务等</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>6</td>
                      <td>肺结核</td>
                      <td>国家传染病免费服务包</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>7</td>
                      <td>严重精神障碍</td>
                      <td>心理输导，心理咨询，治疗服务。</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                    <tr>
                      <td>8</td>
                      <td>残疾人</td>
                      <td>社区关爱服务等</td>
                      <td><button type="button" class="btn btn-link text-danger">删除</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <!-- 右侧 -->
          <div class="col-6">
            <div class="row">
              <div class="col rounded mr-3 bg-white">
                <!-- 右侧表 -->
                <table class="table table-sm table-bordered table-hover ">
                  <caption class="table-title bg-info text-white">服务包详细列表</caption>
                  <thead>
                    <tr>
                      <th scope="col" width="60">序号</th>
                      <th scope="col">服务包种类</th>
                      <th scope="col">服务包类型</th>
                      <th scope="col">价格</th>
                      <th scope="col" width="140">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>

                      <td>1</td>
                      <td>公共卫生基础服务</td>
                      <td>初级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning btn-modify">修改</button>
                        <button type="button" class="btn btn-link text-danger btn-delete">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>2</td>
                      <td>公共卫生基础服务</td>
                      <td>中级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>3</td>
                      <td>公共卫生基础服务</td>
                      <td>高级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>4</td>
                      <td>0~6岁儿童保健</td>
                      <td>初级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>5</td>
                      <td>0~6岁儿童保健</td>
                      <td>中级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>6</td>
                      <td>0~6岁儿童保健</td>
                      <td>高级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>7</td>
                      <td>公共卫生基础服务</td>
                      <td>高级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>8</td>
                      <td>0~6岁儿童保健</td>
                      <td>初级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>9</td>
                      <td>0~6岁儿童保健</td>
                      <td>中级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                    <tr>

                      <td>10</td>
                      <td>0~6岁儿童保健</td>
                      <td>高级包</td>
                      <td>0元</td>
                      <td>
                        <button type="button" class="btn btn-link text-warning">修改</button>
                        <button type="button" class="btn btn-link text-danger">删除</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 分页 -->
            <div class="row mt-3 rounded-lg bg-white">
              <div class="col px-0 justify-content-center d-flex align-content-center">
                <form class="form-inline">
                  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">每页显示条数</label>
                  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
                    <option value="5" >5</option>
                    <option value="10" selected>10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                  </select>
                </form>

                <nav aria-label="Page navigation">
                  <ul class="pagination justify-content-center pr-3 mt-3">
                    <li class="page-item disabled">
                      <a class="page-link">Previous</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#">Next</a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
  <!-- modal  添加服务包种类-->
  <div class="modal" tabindex="-1" id="modalAddServerPack">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">创建新的服务包种类</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form">
            <div class="form-group">
              <label for="spName">服务包种类名称:</label>
              <input type="text" class="form-control" id="spName">
            </div>
            <div class="form-group">
              <label for="spDes">服务包种类描述:</label>
              <input type="text" class="form-control" id="spDes">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-success" id="addServerPackBtn">保存</button>
        </div>
      </div>
    </div>
  </div>
  <!-- modal  修改服务包种类-->
  <div class="modal" tabindex="-1" id="modalModifyServerPack">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改服务包种类</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form">
            <div class="form-group row">
              <label for="spName" class="col-sm-4 text-right">服务包种类名称:</label>
              <input type="text" class="form-control col-sm-7" id="spName">
            </div>
            <div class="form-group row">
              <label for="spDes" class="col-sm-4 text-right">服务包种类描述:</label>
              <input type="text" class="form-control col-sm-7" id="spDes">
            </div>
            <div class="form-group row">
              <label for="spPrice" class="col-sm-4 text-right">价格:</label>
              <input type="number" class="form-control  col-sm-6" id="spPrice">
              <span class="form-control-plaintext col-sm-1">元</span>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-warning" id="modifyServerPackBtn">修改</button>
        </div>
      </div>
    </div>
  </div>
  <script src="./../jquery/jquery-3.6.0.js"></script>
  <script src="./../bootstrap4/dist/js/bootstrap.bundle.js"></script>
  <script src="./../js/comm.js"></script>
  <script src="./../js/serivce_pack.js"></script>

</body>

</html>